<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>5. HTTP 与 Websocket | 被删的前端游乐场</title>
    <meta name="description" content="Just playing around">
    
    
    <link rel="preload" href="/front-end-playground/assets/css/0.styles.a683ed26.css" as="style"><link rel="preload" href="/front-end-playground/assets/js/app.e5cf4092.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/3.c853767c.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/2.eed49fdd.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/15.4056a286.js" as="script">
    <link rel="stylesheet" href="/front-end-playground/assets/css/0.styles.a683ed26.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-playground/" class="home-link router-link-active"><!----> <span class="site-name">被删的前端游乐场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端基础</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link router-link-active">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端基础</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link router-link-active">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0" style="padding-top:10px;"><div class="kitty-main" data-v-0cd75e06><span class="stand" data-v-0cd75e06></span> <div class="cat" data-v-0cd75e06><div class="body" data-v-0cd75e06></div> <div class="head" data-v-0cd75e06><div class="ear" data-v-0cd75e06></div> <div class="ear" data-v-0cd75e06></div></div> <div class="face" data-v-0cd75e06><div class="nose" data-v-0cd75e06></div> <div class="whisker-container" data-v-0cd75e06><div class="whisker" data-v-0cd75e06></div> <div class="whisker" data-v-0cd75e06></div></div> <div class="whisker-container" data-v-0cd75e06><div class="whisker" data-v-0cd75e06></div> <div class="whisker" data-v-0cd75e06></div></div></div> <div class="tail-container" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06></div></div></div></div></div></div></div></div></div></div> <p class="sidebar-heading open"><span>不止单线程</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-playground/front-end-addon/more-than-single-thread/1-thread-and-progress.html" class="sidebar-link">1. 线程与进程</a></li><li><a href="/front-end-playground/front-end-addon/more-than-single-thread/2-progress-and-io.html" class="sidebar-link">2. 多线程与 IO</a></li><li><a href="/front-end-playground/front-end-addon/more-than-single-thread/3-interprocess-communication.html" class="sidebar-link">3. 进程间通信</a></li><li><a href="/front-end-playground/front-end-addon/more-than-single-thread/4-network-progress-and-tcp-ip.html" class="sidebar-link">4. 网络进程通信和 TCP/IP 协议</a></li><li><a href="/front-end-playground/front-end-addon/more-than-single-thread/5-http-and-websocket.html" class="active sidebar-link">5. HTTP 与 Websocket</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-addon/more-than-single-thread/5-http-and-websocket.html#http-请求" class="sidebar-link">HTTP 请求</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-addon/more-than-single-thread/5-http-and-websocket.html#无连接的-http" class="sidebar-link">无连接的 HTTP</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-addon/more-than-single-thread/5-http-and-websocket.html#长连接的-http" class="sidebar-link">长连接的 HTTP</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-addon/more-than-single-thread/5-http-and-websocket.html#什么是-websocket" class="sidebar-link">什么是 Websocket</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-addon/more-than-single-thread/5-http-and-websocket.html#websocket-与-http" class="sidebar-link">Websocket 与 HTTP</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-addon/more-than-single-thread/5-http-and-websocket.html#websocket-特点" class="sidebar-link">Websocket 特点</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-addon/more-than-single-thread/5-http-and-websocket.html#使用-websocket" class="sidebar-link">使用 Websocket</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-addon/more-than-single-thread/5-http-and-websocket.html#参考" class="sidebar-link">参考</a></li></ul></li><li><a href="/front-end-playground/front-end-addon/more-than-single-thread/6-socket-and-socket-io.html" class="sidebar-link">6. 套接字（Socket）与 socket.io</a></li><li><a href="/front-end-playground/front-end-addon/more-than-single-thread/7-node-js.html" class="sidebar-link">7. node.js</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>简单算法之 js 实现</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>不止纯前端</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>该系列主要作为曾经的纯前端，对后台和底层的一些弥补，涉及进程、网络通信，以及对 node.js 和相关框架的学习。本节紧接着网络通信和 TCP/IP，介绍一下 HTTP 和 Websocket。</p> <h1 id="关于-http"><a href="#关于-http" aria-hidden="true" class="header-anchor">#</a> 关于 HTTP</h1> <h2 id="http-请求"><a href="#http-请求" aria-hidden="true" class="header-anchor">#</a> HTTP 请求</h2> <p>很多时候，尤其面试的时候我们会遇到这样的问题：打开浏览器，从输入地址按回车后发生的一系列过程是怎样的。</p> <p>通常来说，一个完整的 HTTP 请求过程是这样的：</p> <ul><li>域名解析（此处涉及 DNS 的寻址过程）</li> <li>发起 TCP 的 3 次握手</li> <li>建立 TCP 连接后发起 http 请求</li> <li>服务器响应 http 请求，浏览器得到 html 代码</li> <li>浏览器解析 html 代码，并请求 html 代码中的资源（如 js、css、图片等，此处可能涉及 HTTP 缓存）</li> <li>浏览器对页面进行渲染呈现给用户（此处涉及浏览器的渲染原理）</li></ul> <h2 id="无连接的-http"><a href="#无连接的-http" aria-hidden="true" class="header-anchor">#</a> 无连接的 HTTP</h2> <h3 id="无连接"><a href="#无连接" aria-hidden="true" class="header-anchor">#</a> 无连接</h3> <p>无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。<br>
采用这种方式可以节省传输时间。</p> <h3 id="keep-alive"><a href="#keep-alive" aria-hidden="true" class="header-anchor">#</a> Keep-Alive</h3> <p>随着时间的推移，网页变得越来越复杂，里面可能嵌入了很多图片，这时候每次访问图片都需要建立一次 TCP 连接就显得很低效。后来，Keep-Alive 被提出用来解决这效率低的问题。</p> <p>Keep-Alive 功能使客户端到服务器端的连接持续有效，当出现对服务器的后继请求时，Keep-Alive 功能避免了建立或者重新建立连接。</p> <h2 id="长连接的-http"><a href="#长连接的-http" aria-hidden="true" class="header-anchor">#</a> 长连接的 HTTP</h2> <p>实现长连接有几个方式：ajax 轮询、长轮询、websocket 等。</p> <h3 id="_1-轮询"><a href="#_1-轮询" aria-hidden="true" class="header-anchor">#</a> 1. 轮询</h3> <p>客户端定时向服务器发送 Ajax 请求，服务器接到请求后马上返回响应信息并关闭连接。</p> <ul><li>优点：后端程序编写比较容易。</li> <li>缺点：请求中有大半是无用，浪费带宽和服务器资源。</li> <li>实例：适于小型应用。</li></ul> <h3 id="_2-长轮询"><a href="#_2-长轮询" aria-hidden="true" class="header-anchor">#</a> 2. 长轮询</h3> <p>客户端向服务器发送 Ajax 请求，服务器接到请求后 hold 住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。</p> <ul><li>优点：在无消息的情况下不会频繁的请求，耗费资源小。</li> <li>缺点：服务器 hold 连接会消耗资源，返回数据顺序无保证，难于管理维护。</li> <li>实例：WebQQ、Hi 网页版、Facebook IM。</li></ul> <h3 id="_3-长连接"><a href="#_3-长连接" aria-hidden="true" class="header-anchor">#</a> 3. 长连接</h3> <p>在页面里嵌入一个隐蔵 iframe，将这个隐蔵 iframe 的 src 属性设为对一个长连接的请求或是采用 xhr 请求，服务器端就能源源不断地往客户端输入数据。</p> <ul><li>优点：消息即时到达，不发无用请求；管理起来也相对方便。</li> <li>缺点：服务器维护一个长连接会增加开销。</li> <li>实例：Gmail 聊天</li></ul> <h3 id="_4-flash-socket"><a href="#_4-flash-socket" aria-hidden="true" class="header-anchor">#</a> 4. Flash Socket</h3> <p>在页面中内嵌入一个使用了 Socket 类的 Flash 程序。JavaScript 通过调用此 Flash 程序提供的 Socket 接口与服务器端的 Socket 接口进行通信，JavaScript 在收到服务器端传送的信息后控制页面的显示。</p> <ul><li>优点：实现真正的即时通信，而不是伪即时。</li> <li>缺点：客户端必须安装 Flash 插件；非 HTTP 协议，无法自动穿越防火墙。</li> <li>实例：网络互动游戏。</li></ul> <p>以上一些是基于 HTTP 协议的长连接实现方案，而下面讲到的 Websocket 则是基于 HTTP 协议上的另外一种通信协议。</p> <h1 id="websocket"><a href="#websocket" aria-hidden="true" class="header-anchor">#</a> Websocket</h1> <h2 id="什么是-websocket"><a href="#什么是-websocket" aria-hidden="true" class="header-anchor">#</a> 什么是 Websocket</h2> <p>WebSocket 是 HTML5 下一种新的协议。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的。</p> <p>Websocket 为持久化协议，基于 HTTP 协议（借用 HTTP 协议完成一部分握手）。</p> <p>WebSocket 是一种双向通信协议。在建立连接后，WebSocket 服务器端和客户端都能主动向对方发送或接收数据，就像 Socket 一样。它与 HTTP 一样通过已建立的 TCP 连接来传输数据。</p> <h2 id="websocket-与-http"><a href="#websocket-与-http" aria-hidden="true" class="header-anchor">#</a> Websocket 与 HTTP</h2> <p>相比 HTTP 长连接，WebSocket 有以下特点：</p> <ol><li>是真正的全双工方式，建立连接后客户端与服务器端是完全平等的，可以互相主动请求。</li></ol> <p>HTTP 长连接基于 HTTP，是传统的客户端对服务器发起请求的模式。<br>
HTTP 的生命周期通过 Request 来界定，也就是一个 Request 一个 Response，且 response 也是被动的，不能主动发起。</p> <ol start="2"><li>HTTP 长连接中，每次数据交换除了真正的数据部分外，服务器和客户端还要大量交换 HTTP header，信息交换效率很低。</li></ol> <p>Websocket 协议通过第一个 request 建立了 TCP 连接之后，之后交换的数据都不需要发送 HTTP header 就能交换数据，这显然和原有的 HTTP 协议有区别。所以它需要对服务器和客户端都进行升级才能实现（主流浏览器都已支持 HTML5）。<br>
还有 multiplexing、不同的 URL 可以复用同一个 WebSocket 连接等功能。这些都是 HTTP 长连接不能做到的。</p> <h2 id="websocket-特点"><a href="#websocket-特点" aria-hidden="true" class="header-anchor">#</a> Websocket 特点</h2> <p>Websocket 的其他特点包括：</p> <ol><li>建立在 TCP 协议之上，服务器端的实现比较容易。</li> <li>与 HTTP 协议有着良好的兼容性。默认端口也是 80 和 443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。</li> <li>数据格式比较轻量，性能开销小，通信高效。</li> <li>可以发送文本，也可以发送二进制数据。</li> <li>没有同源限制，客户端可以与任意服务器通信。</li> <li>协议标识符是 ws（如果加密，则为 wss），服务器网址就是 URL。</li></ol> <h2 id="使用-websocket"><a href="#使用-websocket" aria-hidden="true" class="header-anchor">#</a> 使用 Websocket</h2> <ul><li>WebSocket 构造函数<br>
WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> ws <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WebSocket</span><span class="token punctuation">(</span><span class="token string">&quot;ws://localhost:8080&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li><p><code>ws.readyState</code><br>
readyState 属性返回实例对象的当前状态，共有四种。</p> <ul><li>CONNECTING：值为 0，表示正在连接。</li> <li>OPEN：值为 1，表示连接成功，可以通信了。</li> <li>CLOSING：值为 2，表示连接正在关闭。</li> <li>CLOSED：值为 3，表示连接已经关闭，或者打开连接失败。</li></ul></li> <li><p><code>onopen</code>属性：用于指定连接成功后的回调函数</p></li> <li><p><code>onclose</code>属性：用于指定连接关闭后的回调函数</p></li> <li><p><code>onmessage</code>属性：用于指定收到服务器数据后的回调函数</p></li> <li><p><code>send()</code>方法：用于向服务器发送数据</p></li> <li><p><code>bufferedAmount</code>属性：表示还有多少字节的二进制数据没有发送出去，它可以用来判断发送是否结束</p></li> <li><p><code>onerror</code>属性：用于指定报错时的回调函数</p></li></ul> <p>更多的可以参考<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket" target="_blank" rel="noopener noreferrer">MDN<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>。</p> <h2 id="参考"><a href="#参考" aria-hidden="true" class="header-anchor">#</a> 参考</h2> <ul><li><a href="http://www.cnblogs.com/hoojo/p/longPolling_comet_jquery_iframe_ajax.html" target="_blank" rel="noopener noreferrer">《Web 通信之长连接、长轮询（long polling）》<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://godbasin.github.io/2017/05/20/front-end-notes-7-init-http/" target="_blank" rel="noopener noreferrer">《前端阶段性总结之「理解 HTTP 协议」》<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://www.qcloud.com/document/product/214/4150?fromSource=gwzcw.93403.93403.93403" target="_blank" rel="noopener noreferrer">WebSocket 原理说明<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://www.zhihu.com/question/20215561" target="_blank" rel="noopener noreferrer">知乎--WebSocket 是什么原理？为什么可以实现持久连接？<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://www.ruanyifeng.com/blog/2017/05/websocket.html" target="_blank" rel="noopener noreferrer">WebSocket 教程<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h1 id="结束语"><a href="#结束语" aria-hidden="true" class="header-anchor">#</a> 结束语</h1> <p>本节主要介绍了 HTTP 通信和 Websocket 协议相关，关于 HTTP 协议的内容和知识点还有很多，大家有兴趣可以去补充一下。</p></div> <!----> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/godbasin/front-end-playground/edit/sourcecode/docs/front-end-addon/more-than-single-thread/5-http-and-websocket.md" target="_blank" rel="noopener noreferrer">帮阿猪改善此页面！</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----> <blockquote>部分文章中使用了一些网站的截图，如果涉及侵权，请告诉我删一下谢谢~</blockquote> <div style="margin-top:30px;"><div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-sm-0 el-col-md-2 el-col-lg-4" style="padding-left:10px;padding-right:10px;display:block;"><div style="width:1px;height:1px;"></div></div> <div class="el-col el-col-24 el-col-sm-24 el-col-md-18 el-col-lg-16" style="padding-left:10px;padding-right:10px;"><div class="el-card box-card is-always-shadow"><div class="el-card__header"><div class="clearfix"><span>温馨提示喵</span></div></div><div class="el-card__body"> <div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="el-image"><div class="image-slot"><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/loading.gif" style="width:100%;"></div><!----></div></div> <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="copyright-text"><div>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div> <div>出处：被删的前端游乐场</div> <div>作者：<a href="https://github.com/godbasin" target="_blank">被删</a></div></div></div></div></div></div></div></div></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/front-end-playground/front-end-addon/more-than-single-thread/4-network-progress-and-tcp-ip.html" class="prev">
          4. 网络进程通信和 TCP/IP 协议
        </a></span> <span class="next"><a href="/front-end-playground/front-end-addon/more-than-single-thread/6-socket-and-socket-io.html">
          6. 套接字（Socket）与 socket.io
        </a>
        →
      </span></p></div>  <div class="gitalk-container theme-default-content"><div id="gitalk-container" class="content"></div></div></main> <div id="kitty-container"><span><div role="tooltip" id="el-popover-6566" aria-hidden="true" class="el-popover el-popper" style="width:undefinedpx;display:none;"><!----><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" class="image"> <div class="text">牡羊猪的猫粮罐</div> </div><div id="kitty" style="background:url(https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/kitty1.svg);"></div></span> <div class="el-dialog__wrapper" style="display:none;"><div role="dialog" aria-modal="true" aria-label="牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div></div><div class="global-ui"></div></div>
    <script src="/front-end-playground/assets/js/app.e5cf4092.js" defer></script><script src="/front-end-playground/assets/js/3.c853767c.js" defer></script><script src="/front-end-playground/assets/js/2.eed49fdd.js" defer></script><script src="/front-end-playground/assets/js/15.4056a286.js" defer></script>
  </body>
</html>
